<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./swiper-3.4.2.min.css">
    <style>
        body{
            color: #1a1a1a;
            margin:0;
            height:100%;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif
        }
        ul{
            margin:0;
            padding:0;
            list-style-type: none;
        }
        header{
            position: sticky;
            top:0;
            z-index:10;
            background: #ffffff;
            height:60px;
            padding:0 10%;
        }
        .hz-logo{
            float:left;
            height:60px; 
            line-height: 60px;
        }
        .hz-logo img{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
        }
        .hz-logo span{
            color:#080808;
            font-size:24px;
            font-weight: bold;
            margin-left:40px;
        }
        .header-right{
            float: right;
            height:60px;
            line-height: 60px;
        }
        .header-right button{
            outline: none;
            width:80px;
            height:34px; 
            text-align: center;
            border-radius:17px;
            border:none;
            margin-left:15px;
        }
        .header-right button:first-of-type{
            background:  #2196f3;
            color:white;
        }
        .header-right button:last-of-type{
            background: #f5f5f5;
            color:#090a0b;
        }
        .header-right button:first-of-type:hover{
            background: #51adf6;
            
        }
        .header-right button:last-of-type:hover{
            background: #e9e9e9;
           
        }
/*         .header-right button{
            padding:0 16px;
            font-size: 14px;
            font-weight: 500;
            outline: none;
            height:35px;
            border-radius:3px;
            border:none;
            transition: background 0.3s;
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif!important;
            
        }
        .header-right button:first-of-type{
            color:rgb(0, 0, 0);
            background: #ffffff;
        }
        .header-right button:last-of-type{
            color:rgb(255, 255, 255);
            background: #2196f3;
        }
         .header-right button:first-of-type:hover{
            background: #f5f5f5;
        }
        .header-right button:last-of-type:hover{
            background: #51adf6;
        } */
        .item{
            background: white;
            height:430px;
            padding:0 10%;
        }
/*         .item:nth-of-type(odd){
            background: #f2f2f2;
        } */
        .item:nth-of-type(odd){
            background: #f3f3f3;
        }
        .item-left{
            float:left;
            position: relative;
            width:50%;
            height:100%;
        }
        .item-left div{
            width:100%;
            box-sizing: border-box;
            position: absolute;
            top:50%;
            left:-20%;
            opacity: 0;
            transform: translateY(-50%);
        }
        .item-left .text{
            padding-right:5%;
        }
        .item-right .text{
            padding-left:5%;
        }
        .item-right{
            position: relative;
            overflow: hidden;
            height:100%;
        }
        .item-right div{
            width:100%;
            box-sizing: border-box;
            position: absolute;
            top:50%;
            right:-20%;
            opacity: 0;
            transform: translateY(-50%);
        }
        .swiper-container {
            position: relative;
            width:100%;
            margin:0 auto;
            height:360px;
        }
        .swiper-slide:nth-of-type(1){
            background:url("./photo/255504195.jpg") center no-repeat;
            background-size: 100%;
        }
        .swiper-slide:nth-of-type(2){
            background:url("./photo/323710266.jpg") center no-repeat; 
            background-size: 100%;
        }
        .swiper-slide:nth-of-type(3){
            background:url("./photo/1256356632.jpg") center no-repeat; 
            background-size: 100%;
        }
        .swiper-slide img{
            width:100%;
        }
        .swiper-pagination-bullet-active{
            background: white;
        }
        footer{
            overflow: hidden;
            position:relative;
            padding:0 10%;
            background: #ffffff;
        }
        .footer-nav{
            float:left;
            height:240px;
            color:#969696;
            font-size:12px;
            margin-right:50px;
            margin-top:50px;
        }
        .footer-nav ul{
            float:left;
            margin:0 80px 0 0;
        }
        .footer-nav li{
            margin: 10px 0;
        }
        .footer-right{
            position:absolute;
            top:50%;
            transform: translateY(-50%);
            right:10%;
        }
        .footer-right img{
            display:block;
            width:128px;
            margin: 0 auto;
        }
        .footer-right p{
            position:relative;
            color:#5c5c5c;
            font-size: 0.9em;
        }
        .bottom{
            overflow: hidden;
        }
        .bottom p{
            height:12px;
            line-height: 12px;
            font-size:12px;
            text-align: center;
            color:#bdbdbd;
        }
        .bottom span{
            margin:0 5px;
        }

/* .show .move-logo {
    animation: logomove 970ms cubic-bezier(.8, 0, .2, 1);
    animation-fill-mode: forwards;
}

.show .move-desc {
    animation: descmove 1000ms cubic-bezier(.8, 0, .2, 1);
    animation-fill-mode: forwards;
    animation-delay: 160ms
}

.show .move-title {
    animation: titlemove 1000ms cubic-bezier(.8, 0, .2, 1);
    animation-fill-mode: forwards;
    animation-delay: 80ms
}

.show .move-down {
    animation: btnmove 1000ms cubic-bezier(.8, 0, .2, 1);
    animation-fill-mode: forwards;
    animation-delay: 240ms
}

@keyframes logomove {
    51.55% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes titlemove {
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes descmove {
    50% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes btnmove {
    51.55% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
 */
        @media screen and (max-width: 480px){
            html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
            body {
                font-size: .28em;
                line-height: 1;
                -webkit-text-size-adjust: none;
            }
            h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
            p{
            color: #090a0b;
            font-size: 0.24rem;
            line-height:0.36rem;
            }
            .items{
            margin:0;
            height:7rem;
            padding:0 10%;
            background: url('./photo/main_cover.jpg') center no-repeat;
            background-size: 300%;
            }
            h1{
                text-align: center;
                font-size:0.4rem;
            }
            .items > h1{
            text-align: center;
            font-size:0.56rem;
            }
            .items > p{
                text-align: center;
                font-size:0.28rem;
            }
            .item{
            padding:0 10%;
            position: initial;
            height:100%;
            display: flex;
            flex-direction: column;
            }
            .first{
                order:1;
            }
            .item div:first-of-type{
            position: initial;
            width:100%;
            top:0;
            transform: translateY(0);
            left:0;
            }
            .item div:last-of-type{
            position: initial;
            width:100%;
            top:0;
            transform: translateY(0);
            right:0;
            }
            .hz-logo{
            margin-left:0px;
            position:initial;
            height:50px;
            display:flex;
            justify-content: center;
            align-items: center
            }
            .hz-logo img,span{
                position:initial;
                transform:translateY(0);
            }
            .hz-logo span{
                left:0;
            }
            header{
                height:50px;
            }
        } 

    </style>
    
</head>
<body>
    <div style="position:fixed;bottom:70px;right:50px;z-index:10;width:60px;height:60px;line-height: 60px;background: #2196f3;border-radius: 100%">
        <p style="margin:0;position:absolute;width:2em;line-height:100%;top:50%;left:50%;transform: translate(-50%,-50%);color:white">申请试用</p>
    </div>
    <div id="home-page">
        <header>
            <div class="hz-logo">
                <img src="./photo/logo_orange.png" />
                <span>好招</span>
            </div>
            <div class="header-right">
                <button>申请试用</button>
                <button>登录</button>
            </div>
        </header> 
        
      <main>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"></div>
                    <div class="swiper-slide"></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
<!--             <div id="show">
                <h1 class="move-logo">好招</h1>
                <p class=".move-desc">这里是文字</p>
                <p class=".move-title">这里也是文字</p>
                <p class=".move-down">然后加一点动画</p>
            </div> -->
            <div class="item">
                <div class="item-left">
                        <div class="text">
                                <h1>多招聘渠道整合</h1>
                                <p>整合招聘网站等多种招聘渠道，实现职位一键发布,规避多次登录的繁琐，自动同步各招聘渠道投递的简历，并区别归类于招聘职位，节省时间，提高筛选、管理效率;</p>
                                <p>可主动抓取、解析多平台简历，实现一键入库,简历查重可规避重复下载费用、悬赏推荐费用、猎头推荐佣金，减少不必要的浪费；</p>
                            </div>
                </div>
                <div class="item-right">
                        <div>
                                <img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-foreground-new-180511-21238decde778d549f5792484152b3d25d4e9ce80e2a5890c09a9b2cb8ee0e15.png">
                             </div>
                
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                        <div>
                            <img style="width:100%;" src="https://bb-resumes.b0.upaiyun.com/staging/uploads/image_resource/file/95/jianli.png">
                        </div>
                </div>
                <div class="item-right">
                        <div class="text">
                                <h1>优化招聘工作流程</h1>
                                <p>企业可完全自定义招聘流程阶段，每个职位都可以配置不同的流程阶段；</p>
                                <p>支持职位审批流程管理，可实时向候选人发送邮件、短信通知，可提供强大灵活的笔试、面试、体检、录用、入职等招聘安排，可实时跟踪、记录候选人招聘最新进展；</p>
                                <p>通过系统消息、短信、邮件等方式实现候选人、HR、面试官的无缝协作，从职位发布到录用安排,你可以随时查看每个节点的招聘情况，从而对企业的招聘情况进行全面的管控，让招聘工作透明与规范化。</p>
                        </div>
                </div>
            </div>
            <div class="item"> 
                <div class="item-left">
                        <div class="text">
                                <h1 >打造招聘门户，塑造品牌形象</h1>
                                <p>内置H5页面编辑器，可快速搭建招聘官网和微官网，支持个性化设置招聘宣传页面，支持候选人PC端和移动端（含微信）访问和投递，利用社交渠道的分享、转发，极大降低社交传播和候选人投递的门槛，显著提升雇主品牌</p>
                        </div>
                </div>
                <div class="item-right">
                        <div><img style="width:100%" src="https://bb-resumes.youzhao.io/staging/uploads/image_resource/file/995/1%E6%8B%9B%E8%81%98%E5%AE%98%E7%BD%91-%E8%81%8C%E4%BD%8D%E8%AF%A6%E6%83%85-ui%E5%B0%8F%E8%B0%83%E6%95%B4.png"></div>
                
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <div>
                    <img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-foreground-new-180511-21238decde778d549f5792484152b3d25d4e9ce80e2a5890c09a9b2cb8ee0e15.png">
                    </div>
                </div>
                <div class="item-right">
                    <div class="text">
                    <h1>提升猎头工作效率</h1>
                    <p>帮助企业优化猎头渠道工作效率，创建和维护猎头资源库，可通过邮件、短信向猎头实时发布职位动态，接收猎头推荐的简历并自动匹配到职位，利用简历查重工具避免简历重复推荐；</p>
                    <p>可设置变更猎头供应商的合作方式，可实时查看猎头供应商合作的职位、推荐的人选、成功的OFFER，猎头佣金等数据，全面把控猎头渠道概况，提升猎头渠道的工作效率。</p>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                        <div class="text">
                                <h1>拓宽人才推荐渠道</h1>
                                <p>协助企业打通人才推荐渠道，可灵活定制人才推荐奖励政策，把职位分享、转发到微信、微博等社交渠道，也可以利用公司内部系统把职位定向推送给员工</p>
                                <p>既支持外部社会渠道推荐，也支持内部员工推荐；既支持推荐人快速上传被推荐者的简历，也支持把推荐链接发送给被推荐者，让其自行上传简历</p>
                                </div>
                </div>
                <div class="item-right">
                    <div>
                    <img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-foreground-new-180511-21238decde778d549f5792484152b3d25d4e9ce80e2a5890c09a9b2cb8ee0e15.png">
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                    <div><img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-foreground-new-180511-21238decde778d549f5792484152b3d25d4e9ce80e2a5890c09a9b2cb8ee0e15.png"></div>
                </div>
                <div class="item-right">
                <div class="text">
                    <h1>盘活人才储备，降低成本</h1>
                    <p>每个候选人都是公司的无形资产，好招可以帮助企业高效搭建人才库，对储备人才进行分类管理，通过大数据技术挖掘人才，有效满足当前或未来的招聘需要。可向储备人才发送招聘动态，邀请投递职位，与储备人才持续保持联络，定期更新简历，帮助企业批量盘活人才数据，降低招聘成本。</p>
                </div>
                </div>
            </div>
            <div class="item">
                <div class="item-left">
                <div class="text">
                    <h1>报表/全方位数据分析</h1>
                    <p>从渠道分析到招聘流程分析，通过定制化的报表，对招聘进程、渠道效果、等多个维度进行全面分析。助你分析重点职位招聘中的瓶颈所在，将帮助企业更系统和科学地进行招聘。</p>
                </div>
                </div>
                <div class="item-right"><div><img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-background-56465dc52e8dd2549590135e4c38beb3303d2f688e89760662da400fcad0d5ba.png"></div></div>
            </div>
            <div class="item">
                <div class="item-left"><div><img style="width:100%" src="https://assets.youzhao.io/assets/index/data-driven-foreground-new-180511-21238decde778d549f5792484152b3d25d4e9ce80e2a5890c09a9b2cb8ee0e15.png"></div></div>
                <div class="item-right">
                <div class="text">
                    <h1>系统个性化配置</h1>
                    <p>系统的很多模块都支持高度自定义，满足企业客户个性化的招聘需求。可自定义招聘宣传页面、简历投递模板、招聘流程及招聘阶段、简历标签等等。系统支持组织架构自定义设置，并且可以根据组织架构来分配相应的系统操作权限以及数据访问权限。</p>
                </div>
                </div>
            </div> 
        </main>
        <footer>
            <div class="footer-nav">
                <ul>
                    <li style="font-size:14px;color:#646464;font-weight: bold">产品功能</li>
                    <li>候选人获取</li>
                    <li>招聘流程管理</li>
                    <li>人才库</li>
                    <li>入职管理</li>
                    <li>数据报表</li>
                </ul>
                <ul>
                    <li style="font-size:14px;color:#646464;font-weight: bold">解决方案</li>
                    <li>人才库建设</li>
                    <li>数据分析</li>
                    <li>微招聘</li>
                    <li>校园招聘</li>
                </ul>
                <ul>
                    <li style="font-size:14px;color:#646464;font-weight: bold">资源库</li>
                    <li>博客文章</li>
                    <li>常用模板</li>
                    <li>实用教程</li>
                    <li>猎头公司</li>
                </ul>
                <ul>
                    <li style="font-size:14px;color:#646464;font-weight: bold">关于我们</li>
                    <li>企业介绍</li>
                    <li>联系我们</li>
                    <li>加入我们</li>
                </ul>
            </div>
            <div class="footer-right">
                <img src="./photo/qrcode_hr.jpg">
                <p><object style="width:1.5em;vertical-align: middle;" data="./photo/call.svg" type="image/svg+xml"></object>售前咨询：010-57169313</p>
                <p><object style="width:1.5em;vertical-align: middle;" data="./photo/call.svg" type="image/svg+xml"></object>售后服务：010-57029374</p>
            </div>
        </footer>
        <div class="bottom">
            <p><span>京ICP备09058091号</span><span>人力资源服务许可证:RC0910300</span><span>劳务派遣经营许可证:京10485</span></p>
            <p><span>Copyright © 2016 </span><span>Workbest.cc 职伴网</span><span>版权所有</span></p>
        </div>
    </div>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="./swiper-3.4.2.jquery.min.js"></script>
    <script>
    (function(){
        var scrlen=[];
        var flag=true,flag1=true;
        for(var i=0;i<$(".item").length;i++){
            scrlen.push($(".item").eq(i).offset().top-$(window).height()+200);
        }
        var scrollThrottle=throttle(log,500);
        window.onscroll = log; 
        function log(){
                    if($(window).scrollTop()>5&&flag1==true){
                        $("header").css({"box-shadow":"0 3px 6px 0 rgba(166, 166, 166, 0.3)"});
                        flag1=false;
                    }
                    if($(window).scrollTop()==0){
                        $("header").css({"box-shadow":"0 0"});
                        flag1=true;   
                    }
                    if(flag==true&&$(window).scrollTop()<scrlen[7]+200){
                    if($(window).scrollTop()>scrlen[0]){
                        $(".item-left div").eq(0).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(0).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[1]){
                        $(".item-left div").eq(1).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(1).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[2]){
                        $(".item-left div").eq(2).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(2).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[3]){
                        $(".item-left div").eq(3).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(3).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[4]){
                        $(".item-left div").eq(4).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(4).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[5]){
                        $(".item-left div").eq(5).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(5).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[6]){
                        $(".item-left div").eq(6).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(6).animate({"right":"0%","opacity":"1"},600);
                    }
                    if($(window).scrollTop()>scrlen[7]){
                        $(".item-left div").eq(7).animate({"left":"0%","opacity":"1"},600);
                        $(".item-right div").eq(7).animate({"right":"0%","opacity":"1"},600);
                    }
            }
        }
    })();
//节流函数
function throttle(fn, delta, context) {
        var safe = true;
        return function() {
            var args = arguments;
            if (safe) {
                fn.call(context, args);
                safe = false;
                setTimeout(function() {
                    safe = true;
                }, delta);
            }
        }
    }
    var mySwiper = new Swiper ('.swiper-container', {
        direction : 'horizontal',
        effect : 'fade',
        fade: {
        crossFade: false,
        },
        autoplay : 5000,
        pagination : '.swiper-pagination',
    })
    </script>
</body>
</html>